<template>
  <section class="todoapp">
    <!-- header -->
    <header class="header">
      <input
        class="new-todo"
        autocomplete="off"
        placeholder="Want to do something?(在此键入)"
        @keyup.enter="addTodo"
      />
    </header>
    <!-- main section -->
    <section v-show="todos.length" class="main">
      <input
        id="toggle-all"
        :checked="allChecked"
        class="toggle-all"
        type="checkbox"
        @change="toggleAll({ done: !allChecked })"
      />
      <label for="toggle-all" />
      <ul class="todo-list">
        <todo
          v-for="(todo, index) in filteredTodos"
          :key="index"
          :todo="todo"
          @toggleTodo="toggleTodo"
          @editTodo="editTodo"
          @deleteTodo="deleteTodo"
        />
      </ul>
    </section>
    <!-- footer -->
    <footer v-show="todos.length" class="footer">
      <span class="todo-count">
        <strong>{{ remaining }}</strong>
        {{ remaining | pluralize("item") }} left
      </span>
      <ul class="filters">
        <li v-for="(val, key) in filters" :key="key">
          <a
            :class="{ selected: visibility === key }"
            @click.prevent="visibility = key"
            >{{ key | capitalize }}</a
          >
        </li>
      </ul>
      <!-- <button class="clear-completed" v-show="todos.length > remaining" @click="clearCompleted">
        Clear completed
      </button> -->
    </footer>
  </section>
</template>

<script>
import Todo from "./Todo.vue";

const STORAGE_KEY = "todos";
const filters = {
  all: (todos) => todos,
  active: (todos) => todos.filter((todo) => !todo.done),
  completed: (todos) => todos.filter((todo) => todo.done),
};
  //  function judge(e){
  //     if(e==1){
  //       return true;
  //     }
  //     else if(e==0){
  //       return false;
  //     }
  //     else{
  //       return;
  //     }
  //   };
// const defalutList = [
//   { text: 'star this repository', done: false },
//   { text: 'fork this repository', done: false },
//   { text: 'follow author', done: false },
//   { text: 'vue-element-admin', done: true },
//   { text: 'vue', done: true },
//   { text: 'element-ui', done: true },
//   { text: 'axios', done: true },
//   { text: 'webpack', done: true }
// ]
export default {
  components: { Todo },
  filters: {
    pluralize: (n, w) => (n === 1 ? w : w + "s"),
    capitalize: (s) => s.charAt(0).toUpperCase() + s.slice(1),
  },
  data() {
    return {
      visibility: "all",
      filters,
      // todos: JSON.parse(window.localStorage.getItem(STORAGE_KEY)) || defalutList
      todos: [],
      obj: {},
    };
  },
  computed: {
    allChecked() {
      
      return this.todos.every((todo) => todo.done);
    },
    filteredTodos() {
      return filters[this.visibility](this.todos);
    },
    remaining() {
      return this.todos.filter((todo) => !todo.done).length;
    },
  },
  methods: {

    async getTodo() {
      let result =await this.$axios.get("/dashboard/getlist");
      console.log(result);
      this.todos = result.res;
    },
    setLocalStorage() {
      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(this.todos));
    },
    async addTodo(e) {
      const text = e.target.value;
      if (text.trim()) {
        this.todos.push({
          text,
          done: false,
        });
        this.obj = {
          text: e.target.value,
          done: false,
        };
        let add =await this.$axios.post("/dashboard/addlist", this.obj);
        console.log(add);
        this.setLocalStorage();
      }
      e.target.value = "";
    },
    async toggleTodo(val) {
      console.log(val);
      let checkTodo = await this.$axios.post('/dashboard/checklist',val);
      val.done = !val.done;
      this.setLocalStorage();
    },
    async deleteTodo(todo) {
      console.log(todo);
      this.todos.splice(this.todos.indexOf(todo), 1);
      let deleteTodo = await this.$axios.post('/dashboard/deletelist',todo);
      
      this.setLocalStorage();
    },
    editTodo({ todo, value }) {
      todo.text = value;
      this.setLocalStorage();
    },
    clearCompleted() {
      this.todos = this.todos.filter((todo) => !todo.done);
      this.setLocalStorage();
    },
    toggleAll({ done }) {
      console.log(done);
      this.todos.forEach((todo) => {
        todo.done = done;
        this.setLocalStorage();
      });
    },
  },
  mounted() {
    this.getTodo();
  },
};
</script>

<style lang="scss">
@import "./index.scss";
</style>
